var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
prop,
el = document.createElement('div');

for(var i = 0, l = props.length; i < l; i++) {
    if(typeof el.style[props[i]] !== "undefined") {
        prop = props[i];
        break;
    }
}

var xAngle = 0, yAngle = 0;
$('body').keydown(function(evt) {
    
    remove_class(); 
             
    
    
    switch(evt.keyCode) {
        case 37: // left
            yAngle -= 90;
            break;

        case 38: // up
            xAngle += 90;
            break;

        case 39: // right
            yAngle += 90;
            break;

        case 40: // down
            xAngle -= 90;
            break;
            
        case 32: //space
            change_class();
            break;
            
        case 13: //enter
            
            change_class();
            alert ('changement de playlist');
            break;
           
    };
    
    document.getElementById('cube').style[prop] = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
}); 

$( "#experiment" ).click(function() {
        
                                          
               $("#experiment").fadeOut('speed');  

                   setTimeout(function() {                    $("#experiment").removeClass('focus'); // on arrete le 'scale' et on passe a une transitation

                   }, 500);
  

setTimeout(function() {  
                            $("#experiment").fadeIn('medium');
 // on arrete la tranlation
setTimeout(function() {  
     $("#experiment").addClass('finalposition');  // On modifie le css et on, modifie la position pour finaliser la transition

}, 80);
}, 100);
 
 
 
//      setTimeout(function() {  
//                  $("#experiment").addClass('transit');
//}, 500);     


       
        
        
//           setTimeout(function() {  
//               
//                      $("#experiment").removeClass('transit');       
//      $("#experiment").addClass('finishanimate');
//        }, 500);
      

   
   
//setTimeout(function() {
//                  // On commence par retrecir les faces du cubes  OK
////        $( ".face" ).css('height','300px');
////          $( ".face" ).css('width','300px');
////          $( "#cube" ).css('width','200px');
////        $( "#cube" ).css('height','200px');
////          $('.one').css({
////          position :'relative',
////          top : 50
////    });
////    $('.one').css({
////          position :'relative',
////          top : 0
////    });$('.two').css({
////          position :'relative',
////          top : 0
////    });$('.three').css({
////          position :'relative',
////          right : 0
////    });$('.four').css({
////          position :'relative',
////          right : 0
////    });$('.five').css({
////          position :'relative',
////          left : 0
////    });
////    ('.six').css({
////          position :'relative',
////          bottom : 50
////    });
////            $("#experiment").removeClass('focus');
////            alert(1);
//
//}, 200000);



//        
//              
              
            // Puis on les repositionnes
//            $('.').animate({
//                top: '+=50'
//              }, 300, function() {
//              });
//            $('.two').animate({
//                webkitTransform: '+=50'
//              }, 300, function() {
//              });
//            $('.three').animate({
//                right: '+=50'
//              }, 300, function() {
//              });
//            $('.five').animate({
//                left: '+=50'
//              }, 300, function() {
//              });
//            $('.six').animate({
//                bottom: '+=50'
//              }, 300, function() {
//              });
//              
     // Do something after 5 seconds

});

function remove_class() {  // permet de passer du control du cube par clavier à l'animation
    
    var bouge = document.getElementById('cube');
    bouge.className= ""; 
                
} 

function change_class() {  // permet de passer de l'animation au control du cube par clavier
    
    var bouge = document.getElementById('cube');
    bouge.className= "animate"; 
                
} 

function hide_cube(currentpage) {
    $('#menu_link').text('Cube');
    $("#menu_link").attr("onClick","show_cube(currentpage)");

    currentpage1 = currentpage;
    current_page = 'main';
    if(current_page == 'main')
    {
        $("#main").css('display', 'none'); 
        //               $("#volet").toggle();
        $(".sc-player playing").css('display', 'none');  
        $(".playlist1").css('display', 'none');   
        $(".playlist2").css('display', 'none');   
        $(".playlist3").css('display', 'none');   
        $(".playlist4").css('display', 'none');   
        $(".playlist5").css('display', 'none');   
        $(".playlist6").css('display', 'none'); 
        //               $("#volet").toggle();
        $("#volet").removeClass('volet');
        $("#archive_title").css('display', 'block');


        current_page = 'archive';
    }

}

function show_cube(currentpage1){
    $('#menu_link').text('Archive');
    $("#menu_link").attr("onClick","hide_cube(currentpage)");
    $("#volet").addClass('volet');

    $('.'+currentpage1).css('display', 'block');   
  
    $("#archive_title").css('display', 'none');

    $("#main").css('display', 'block'); 

    current_page = 'main';
        
}


function change_perspective() { //permet entrer dans le cube
    
    var perspective = document.getElementById('link_room');
    perspective.element.style.width = '150px';
                
} 


